"use client";

/*
 * @Author: hongbin
 * @Date: 2025-04-26 15:49:13
 * @LastEditors: hongbin
 * @LastEditTime: 2025-04-26 15:55:21
 * @Description:
 */
import { Box, Button, Card, Container, Flex, Heading, Text, TextField } from "@radix-ui/themes";
import { useRouter } from "next/navigation";
import { useState } from "react";

export default function RegisterPage() {
    const router = useRouter();

    const [email, setEmail] = useState("");
    const [password, setPassword] = useState("");
    const [confirm, setConfirm] = useState("");
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState("");

    const simulateRegister = (): Promise<"success" | "fail"> => {
        return new Promise(resolve => {
            setTimeout(() => {
                if (password === confirm && email) {
                    resolve("success");
                } else {
                    resolve("fail");
                }
            }, 1500);
        });
    };

    const handleRegister = async () => {
        setLoading(true);
        setError("");

        if (!email || !password || !confirm) {
            setError("请填写完整信息");
            setLoading(false);
            return;
        }

        if (password !== confirm) {
            setError("两次输入的密码不一致");
            setLoading(false);
            return;
        }

        const result = await simulateRegister();

        if (result === "success") {
            router.push("/login");
        } else {
            setError("注册失败，请稍后再试");
        }

        setLoading(false);
    };

    const clearErrorOnInput = () => {
        if (error) setError("");
    };

    return (
        <Container
            size='2'
            height='100vh'>
            <Flex
                justify='center'
                align='center'
                height='100%'>
                <Box
                    width='100%'
                    maxWidth='400px'
                    p='4'>
                    <Card
                        style={{
                            boxShadow: "var(--shadow-3)",
                        }}
                        variant={"ghost"}>
                        <Flex
                            direction='column'
                            gap='3'>
                            <Heading
                                size='6'
                                align='center'
                                mb='2'>
                                注册账号
                            </Heading>

                            <Text
                                as='label'
                                size='2'>
                                邮箱
                            </Text>
                            <TextField.Root
                                type='email'
                                placeholder='请输入邮箱'
                                value={email}
                                onChange={e => {
                                    setEmail(e.target.value);
                                    clearErrorOnInput();
                                }}
                                color={error ? "red" : undefined}></TextField.Root>

                            <Text
                                as='label'
                                size='2'>
                                密码
                            </Text>
                            <TextField.Root
                                type='password'
                                placeholder='请输入密码'
                                value={password}
                                onChange={e => {
                                    setPassword(e.target.value);
                                    clearErrorOnInput();
                                }}
                                color={error ? "red" : undefined}></TextField.Root>

                            <Text
                                as='label'
                                size='2'>
                                确认密码
                            </Text>
                            <TextField.Root
                                type='password'
                                placeholder='请再次输入密码'
                                value={confirm}
                                onChange={e => {
                                    setConfirm(e.target.value);
                                    clearErrorOnInput();
                                }}
                                color={error ? "red" : undefined}></TextField.Root>

                            {/* 错误提示 */}
                            <div style={{ minHeight: "1.2rem" }}>
                                <Text
                                    size='1'
                                    color='red'
                                    style={{
                                        opacity: error ? 1 : 0,
                                        transition: "opacity 0.2s ease-in-out",
                                    }}>
                                    {error || "占位防抖动"}
                                </Text>
                            </div>

                            {/* 操作按钮 */}
                            <Flex
                                justify='center'
                                gap='3'
                                mt='2'>
                                <Button
                                    onClick={handleRegister}
                                    disabled={loading}>
                                    {loading ? "注册中..." : "注册"}
                                </Button>
                                <Button
                                    variant='soft'
                                    onClick={() => router.push("/login")}
                                    disabled={loading}>
                                    登录
                                </Button>
                            </Flex>
                        </Flex>
                    </Card>
                </Box>
            </Flex>
        </Container>
    );
}
